<template>
  <view class="expression-bar">
    <!-- <swiper class="slider" :current="emojiData.length - 1">
      <swiper-item
        v-for="(item, key) in emojiData"
        :key="key"
        class="slider-emoji"
        :class="[key == emojiData.length - 1 ? 'lastbox' : '']"
      >
        <span
          v-for="(emoji, index) in item"
          :key="index"
          @click="selemoji(emoji)"
          class="slider-emoji-icon"
        >
          {{ emoji }}
        </span>
      </swiper-item>
    </swiper> -->
    <scroll-view scroll-y class="expressionMain">
      <view
        v-for="(item, key) in emoji"
        :key="key"
        class="expressionBox"
      >
        <span class="txt" @click="selemoji(item)">
          {{ item }}
        </span>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import emoji from "@/js_sdk/m-emoji/emoji.js";

export default {
  props: {
    expressionInput: Function,
  },
  data() {
    return {
      emojiData: [],
      emoji,
    };
  },
  mounted() {
    var page = Math.ceil(emoji.length / 21);
    const d = []
    for (let i = 0; i < page; i++) {
      d[i] = [];
      for (let k = 0; k < 21; k++) {
        emoji[i * 21 + k] ? d[i].push(
          emoji[i * 21 + k]
        ) : ''
      }
    }
    this.emojiData = d
  },
  methods: {
    selemoji(m) {
      this.expressionInput(m)
      // this.customEditorCtx.getContents({
        // success(data) {
        //   console.log(data,'datadata');
        //   let html = `${data.text}${m}`;
        //   this.customEditorCtx.setContents({ delta: {
        //     "ops": [{
        //       "insert": html
        //     }]
        //   } })
				// // 给富文本设置内容
      //   }
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.expression-bar {
  background: #f0f2f6;
  padding: 0rpx 36rpx;

  .slider {
    width: 100%;
    .slider-emoji {
      width: 100%;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:center;
      height: 100rpx;
      .slider-emoji-icon {
        text-align: center;
      }
    }
  }
  .lastbox{
    justify-content: flex-start;
  }
}

.expressionMain {
  height: 204px;
  width: 100%;
  text-align: center;
  .expressionBox {
    text-align: center;
    display: inline-block;
    .txt {
      // @include centerBox();
      font-size: 50rpx;
      padding: 5px;
      // width: 45rpx;
      // height: 45rpx;
    }
  }
}
</style>
